<template>
  <div class="order-container">
    <div class="chart-table-container">
      <!-- <div class="dashboard-text">仪表盘 Dashboard</div>
      <p class="gray-text">储能站的所有细节信息都在这里...</p> -->
      <div class="charts-wrapper1 flex-container">
        <Chart Id="week-line" :option="weekOption" />
        <Chart Id="day-line" :option="dayOption" />
      </div>
      <div class="charts-wrapper2 flex-container">
        <Chart Id="status-pie" :option="statusOption" />
        <Chart Id="type-pie" :option="typeOption" />
        <Chart Id="bmu-pie" :option="bmuOption" />
      </div>

      <div class="order-table-wrapper box-shadow-templat">
        <span class="table-head">订单记录</span>
        <el-input
          v-model="searchContent"
          size="mini"
          @input="change($event)"
          placeholder="搜索"
          class="search"
        ></el-input>
        <div class="table-container e">
          <el-table
            :data="getPageData()"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            ref="multipleTable"
          >
            <el-table-column prop="id" label="编号" align="center" width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70"
            ></el-table-column>
            <el-table-column label="电量" align="center" width="100"
              ><template slot-scope="scope">
                <div class="progress" :class="{ low: scope.row.left < 50 }">
                  <div class="progress-bg">
                    <div
                      class="progress-value"
                      :style="`width: ${scope.row.left}%`"
                    ></div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="starttime"
              label="开始时间"
              align="center"
              width="140"
            ></el-table-column>

            <el-table-column
              prop="endtime"
              label="结束时间"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="bsu"
              label="BSU"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="bcu"
              label="BCU"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="bmu"
              label="BMU"
              align="center"
              width="100"
            ></el-table-column>
          </el-table>
        </div>
        <el-pagination
          @current-change="current_change"
          @size-change="handleSizeChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="pageSize"
          :total="orderTable.length"
          layout="total, sizes, prev, pager, next, jumper"
          background
        >
        </el-pagination>
      </div>
    </div>
    <div class="profile-container">
      <user-profile :userInfo="userInfo" />
      <station-profile
        :stationInfo="stationInfo"
        :warningRecord="warningRecord"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Chart from "@/components/Chart";
import List from "@/components/List";
import UserProfile from "@/components/Station/UserProfile.vue";
import StationProfile from "@/components/Station/StationProfile.vue";
import {
  OrderWeekOption,
  OrderDayOption,
  OrderStatusOption,
  OrderTypeOption,
  OrderBmuOption,
} from "@/utils/chartOpt";
import {
  getOrderWeek,
  getOrderDay,
  getOrderStatus,
  getOrderType,
  getOrderBmu,
  getOrderTable,
} from "@/api/order";
import { getUserInfo, getStationInfo, getWarningRecord } from "@/api/station";
export default {
  name: "Order",
  components: { Chart, List, UserProfile, StationProfile },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      weekOption: {},
      dayOption: {},
      statusOption: {},
      typeOption: {},
      bmuOption: {},
      orderTable: [],
      userInfo: {},
      stationInfo: {},
      warningRecord: [],
      pageSize: 3, //每页的数据条数
      currentPage: 1, //默认开始页面
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getOrderWeek().then((res) => {
        this.weekOption = OrderWeekOption(res.data);
      });

      getOrderDay().then((res) => {
        this.dayOption = OrderDayOption(res.data);
      });

      getOrderStatus().then((res) => {
        this.statusOption = OrderStatusOption(res.data);
      });

      getOrderType().then((res) => {
        this.typeOption = OrderTypeOption(res.data);
      });

      getOrderBmu().then((res) => {
        this.bmuOption = OrderBmuOption(res.data);
      });

      getOrderTable().then((res) => {
        this.orderTable = res.data;
        console.log(res.data);
      });

      getUserInfo().then((res) => {
        this.userInfo = res.data;
      });

      getStationInfo().then((res) => {
        this.stationInfo = res.data;
      });

      getWarningRecord().then((res) => {
        this.warningRecord = res.data;
      });
    },
    getPageData() {
      var input = this.searchContent && this.searchContent.toLowerCase();
      var items = this.orderTable;
      var items1;
      if (input) {
        items1 = items.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item[key1]).toLowerCase().match(input);
          });
        });
        items1 = items1.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      } else {
        items1 = items.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      }
      return items1;
    },
    change(e) {
      this.$forceUpdate();
    },
    //翻页
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    // 每页多少条
    handleSizeChange: function (val) {
      this.pageSize = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.profile-container {
  margin-left: 5px;
  width: 370px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.order-container {
  display: flex;
}
.flex-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}
.charts-wrapper1 .chart-template {
  width: 49%;
}
.charts-wrapper2 .chart-template {
  width: 32.5%;
}
.order {
  &-container {
    margin: 15px 10px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    color: #1f2a49;
  }
}
.chart-table-container {
  width: calc(100% - 385px);
  display: inline-block;
  vertical-align: top;
}
.profile-container {
  display: flex;
  flex-direction: column;
}
.order-table-wrapper {
  background: white;
  padding: 15px;
  border-radius: 15px;
  .table-head {
    font-size: 20px;
    font-weight: bold;
    color: #2c3653;
    margin-bottom: 5px;
    padding-left: 5px;
  }
  .search {
    width: 300px;
    margin-left: 20px;
  }
  .progress {
    width: 100px;
    .progress-bg {
      position: relative;
      width: 95%;
      height: 5px;
      background: rgba(0, 139, 157, 0.2);
      border-radius: 5px;
    }
    .progress-value {
      position: absolute;
      left: 0;
      top: 0;
      height: 5px;
      background: #73c0de;
      border-radius: 5px;
    }
  }

  .progress.low {
    .progress-bg {
      background: rgba(249, 110, 91, 0.2);
    }
    .progress-value {
      background: #f96e5b;
    }
  }
}
</style>
